<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="100px">
            <el-form-item label="货架编号" prop="name">
                <el-input v-model.trim="queryParams.name" placeholder="请输入货架编号" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small" style="width: 240px">
                    <el-option v-for="(dict, index) in dict.STATUS_LIST" :key="index" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label=" ">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData" border script>
            <el-table-column label="货架编号" prop="name"></el-table-column>
            <el-table-column label="仓库分区" prop="partition_name"></el-table-column>
            <el-table-column label="拣货顺序" prop="weight"></el-table-column>
            <el-table-column label="状态" prop="status"></el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-thumb" @click="submit(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList"></pagination>
        <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
</template>

<script>
import { queryGoodsshelvesList, change_position } from '@/api/warehouse'
export default {
    name: 'ChangePositionDialog',
    components: {},
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            tableData: [],
            pageInfo: {
                page: 1,
                limit: 10,
            },
            queryParams: {
                name: undefined,
                status: undefined,
            },
            rules: {},
            dict: {
                STATUS_LIST: [
                    { value: '0', label: '可分配' },
                    { value: '1', label: '被占用' },
                    { value: '2', label: '可回收' },
                ],
            },
        }
    },
    computed: {
        title() {
            return `修改货架位`
        },
        isEdit() {
            return !!this.params.id
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.getDetail()
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async mounted() {
        this.getList()
    },
    methods: {
        //列表
        getList() {
            this.loading = true
            const qyparams = {
                ...this.pageInfo,
                ...this.queryParams,
            }
            queryGoodsshelvesList(qyparams)
                .then(response => {
                    this.tableData = response.data.list
                    this.total = response.data.total
                })
                .finally(() => {
                    this.loading = false
                })
        },

        // 搜索按钮操作
        handleQuery() {
            this.pageInfo.page = 1
            this.getList()
        },

        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')

            this.handleQuery()
        },
        resetSort() {
            this.queryParams.safe_quantity = undefined
            this.queryParams.on_way_quantity = undefined
            this.queryParams.not_send_quantity = undefined
            this.queryParams.using_quantity = undefined
            this.queryParams.inventory_quantity = undefined
            this.queryParams.all_inventory_quantity = undefined
        },
        handleSortChange({ column, prop, order }) {
            this.resetSort()
            this.queryParams[prop] = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : undefined
            this.getList()
        },
        getDetail() {
            this.loading = true
            const params = { id: this.params.id }
            detailedListInfoDetail(params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                })
                .finally(() => {
                    this.loading = false
                })
        },
        submit(row) {
            const params = { id: this.params.id, warehouse_position: row.name }
            if (this.save) {
                return
            }
            this.save = true
            change_position(params)
                .then(res => {
                    this.$message.success(res.msg)
                    this.dialogVisible = false
                    this.$emit('success')
                })
                .finally(() => {
                    this.save = false
                })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.prod-form-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.prod-form-class.el-form .el-form-item .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w750 {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.w750 .el-input {
    width: 770px;
}
.prod-form-class.el-form .el-form-item .el-textarea {
    width: 770px;
}
.prod-form-class.el-form .el-form-item.full {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.full .el-input,
.prod-form-class.el-form .el-form-item.full .el-cascader {
    width: 770px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 + .el-input-number {
    margin-left: 10px;
}
.prod-form-class.el-form .el-form-item .el-input-number,
.prod-form-class.el-form .el-form-item .el-input-number .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120,
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 .el-input {
    width: 120px;
}
.prod-form-class.el-form .el-input-number.is-without-controls .el-input__inner {
    text-align: left;
}
.custom-select .el-select-dropdown__item {
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
